<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
const router = useRouter()
const props = defineProps({
	tableList: Array,
	default: []
})
const queryName = ref('')
const createTagGroup = () => {
	router.push({path:'createTagGruop'})
}
const goToDetails = (id) => {
	router.push({
		path: '/app/wework/invitateDetails',
		query: {
			id
		}
	})
}
</script>
<template>
	<div class="content">
		<div class="header">
			<el-button class="btn-create" @click="createTagGroup" type="primary">创建群邀请</el-button>
			<el-input
				style="width: 203px; height: 32px"
				v-model="queryName"
				placeholder="搜索任务名称"
				:suffix-icon="Search"
			/>
		</div>
		<el-table :data="props.tableList" style="width: 100%; margin-top: 20px">
			<el-table-column prop="mission_name" label="任务名称" />
			<el-table-column prop="group_name[0]" label="群名称" />
			<el-table-column prop="address" label="发送邀请成员">
				<template #default="scope">
					<div class="tag-list">
						<span class="ame-popover-slot">
							<el-icon class="user-icon"><UserFilled /></el-icon>
							<span>{{ scope.row.staff_name }}</span>
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column prop="sended_staff_count" label="已邀请客户" width="120" />
			<el-table-column prop="in_group_count" label="已入群客户" width="120" />
			<el-table-column prop="unsended_staff_count" label="未发送成员" width="120" />
			<el-table-column prop="fail_no_friend_count" label="未邀请客户" width="120" />
			<el-table-column label="操作" width="240" align="right">
				<template #default="scope">
					<div class="table-operation">
						<el-tooltip effect="light" content="没有未发送的成员，无法发送提醒" placement="top">
							<span v-show="scope.row.status" class="send-no">提醒发送</span>
						</el-tooltip>
						<el-divider direction="vertical" />
						<span @click="goToDetails(scope.row.id)" class="send">详情</span>
						<el-divider direction="vertical" />
						<span class="send">删除</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	:deep(.el-table thead) {
		color: rgba(65, 66, 74, 0.85);
		font-weight: 500;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.btn-create {
			width: 104px;
			height: 36px;
		}
	}
	.tag-list {
		.ame-popover-slot {
			display: inline-flex;
			align-items: center;
			max-width: 136px;
			padding: 3px 7px;
			background: #fff;
			border: 1px solid #d9d9d9;
			border-radius: 2px;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.65);
			.user-icon {
				font-size: 12px;
				color: #7ea4d1;
				margin-right: 4px;
			}
		}
	}

	.table-operation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;

		.send {
			color: #1890ff;
			cursor: pointer;
		}
		.send-no {
			color: #8bc7ff;
			cursor: pointer;
		}
	}
}
</style>
